<template>
  <!-- 头部区域 -->
  <header class="header" :class="{ 'scrolled': isScrolled }">
    <router-link class="logo" to="/">
      <template #default="{ navigate }">
        <div @click="navigate">
          <img src="@/assets/images/logo-fiexd.png" alt="Logo" v-show="isScrolled">
          <img src="@/assets/images/logo.png" alt="Logo" v-show="!isScrolled">
        </div>
      </template>
    </router-link>
    <nav class="nav" v-if="activeIndex==0">
      <ul>
        <li class="active">县志</li>
        <li class="has-dropdown" @click.stop="toggleDropdown('town')">
          <a href="#">乡镇志</a>
        </li>
        <li @click.stop="toggleDropdown('village')"><a href="#">村志</a></li>
        <li v-if="activeIndex==0"><a href="#">数字家谱</a></li>
        <li v-if="activeIndex==0"><a href="#">数字文献</a></li>
      </ul>
    </nav>

    <nav class="nav" v-else>
      <ul>
        <li >县志</li>
        <li class="has-dropdown" :class="activeIndex==1?'active':''" >乡镇志</li>
        <li :class="activeIndex==2?'active':''">村志</li>
      </ul>
    </nav>

  </header>

  <div class="dropdown-container" v-show="activeDropdown === 'town'||activeDropdown === 'village'">
    <div class="dropdown" >
      <div class="dropdown-title">乡镇街道</div>
      <ul class="dropdown-ul">
        <li class="dropdown-li" :class="activeTownId===item.id?'active':''" @click="onHandlerTown(item)" v-for="item in townList" :key="item.id">
          {{item.name}}
          <i class="arrow"></i>
        </li>

      </ul>
    </div>

    <div class="dropdown dropdown2" v-show="activeDropdown === 'village'">
      <div class="dropdown-title">村社区</div>
      <ul class="dropdown-ul">
        <li class="dropdown-li" v-for="item in childrenArr" :key="item.id" @click="handleVillageClick(item)">
          {{item.name}}
        </li>
      </ul>
    </div>
  </div>

  <div class="swiper-container" ref="swiperContainerRef">
    <Swiper
      :slides-per-view="1"
      :modules="[$SwiperModules.Pagination, $SwiperModules.Autoplay]"
      :autoplay="{ delay: 5000, disableOnInteraction: false }"
      :pagination="{ clickable: true ,el: '.swiper-pagination'}"
      @swiper="onSwiper"
      loop
      :speed="1000"
      @slideChange="onSlideChange"
      class="swiper-wrapper"
    >
      <template v-if="swiperPics.length">
        <SwiperSlide v-for="(slide, index) in swiperPics" :key="index">
          <img :src="slide" />
        </SwiperSlide>
      </template>
      <template v-else>
        <SwiperSlide v-for="(slide, index) in newSwiperPics" :key="index">
          <img :src="slide" />
        </SwiperSlide>
      </template>

      <!-- 可以添加更多 Slide -->
    </Swiper>
    <div class="swiper-pagination"></div>  <!-- 添加 pagination 元素 -->
  </div>
</template>
<script setup> 
  // 暴露根元素给父组件
  import { ref, onMounted, onUnmounted, watch } from 'vue';
  import {  townChildList } from '@/api/common'
  import { useRouter  } from 'vue-router'
  import bannerV from '@/assets/images/banner-v.png'
  import bannerT from '@/assets/images/banner-t.png'

  const router = useRouter()

  const props = defineProps({
    activeIndex: {
      type: Number,
      default: 0
    },
    swiperPics: {
      type: Array,
      default: () => []
    },
    // 乡镇街道列表
    townList: {
      type: Array,
      default: () => []
    }
  });

  watch(() => props.townList, (newValue) => { 
    activeTownId.value = newValue[0].id;
    getChildrenList();
  })

  const newSwiperPics = ref([])

  const activeTownId = ref(null)
  const onSwiper = (swiper) => {
    console.log(swiper);
  };

  const onSlideChange = () => {
    console.log('slide change');
  };


  const swiperContainerRef = ref(null);
  const isScrolled = ref(false);

  const getSwiperHeight = () => {
    if (swiperContainerRef.value ) {
      const height = swiperContainerRef.value.offsetHeight;
      return height;
    }
    return 0;
  };

  const handleScroll = () => {
    const swiperHeight = getSwiperHeight();
    isScrolled.value = window.scrollY > swiperHeight;
  };

  onMounted(() => {
    window.addEventListener('scroll', handleScroll);
    document.addEventListener('click', handleClickOutside);

    
    if(!props.swiperPics.length){
      
      if(props.activeIndex==1){
        newSwiperPics.value = [bannerT]
      }
      if(props.activeIndex==2){
        newSwiperPics.value = [bannerV]
      }
    }
  });

  onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
  });

  const activeDropdown = ref(null);
  const toggleDropdown = (type) => {
    if(activeDropdown.value !== type&&type=="village"){
      activeTownId.value = props.townList[0].id
      getChildrenList()
    }
    activeDropdown.value = activeDropdown.value === type ? null : type;

  };

  const childrenArr = ref([]);
  const getChildrenList = () => { 
    // let orgId = props.townList[0].id
    townChildList({orgId:activeTownId.value}).then(res => { 
      let { code, data, message } = res
      if(code === 0){
        childrenArr.value = data
      }else{
        ElMessage.warning(message);
      }
    })
  };

  // 点击页面其他区域关闭下拉菜单
  const handleClickOutside = (event) => {
  const target = event.target;
    // 检查点击的元素是否在 dropdown-container 内
  const dropdownContainer = target.closest('.dropdown-container');
  const dropdown = target.closest('.has-dropdown');
    if (!dropdown && !dropdownContainer) {
      activeDropdown.value = null;
    }
  };

  const onHandlerTown = (item)=>{
    if(activeDropdown.value === 'town'){
      activeTownId.value = null;
      router.push({ path: '/township', query: { id: item.id } })
    }else{
      activeTownId.value = item.id;
      getChildrenList();
    }
  }

  // 在现有代码中添加这个方法
  const handleVillageClick = (item) => {
    // 关闭下拉菜单
    activeDropdown.value = null;
    // 跳转到村社区详情页，假设路由为 '/village'，参数为村社区ID
    router.push({ 
      path: '/village', 
      query: { id: item.id } 
    });
  };

</script>
<style lang="scss" scoped>
.header {
  position:fixed;
  left: 0;
  width: 100%;
  min-width: 1280px;
  z-index: 99;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: url('@/assets/images/logo-bg.png') ;
  padding: 10px 20px;
  transition: background 0.3s ease-in-out;
  &.scrolled{
    background: #fff;
    box-shadow: rgba($color: #333, $alpha: 0.5) 0px 0px 5px;
    li{
      color: #333!important;
    }
    a{
      color: #333!important;
      &:hover{
        color: #B52628!important;
      }
    }
  }
  .logo {
    display: flex;
    align-items: center;
    margin-left: 170px;
    img {
      height: 50px;
      margin-right: 10px;
    }
    span {
      font-size: 18px;
      color: #333;
    }
  }
  .nav {
    margin-right: 100px;
    ul {
      list-style: none;
      display: flex;
      li {
        margin:0 16px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        font-weight: 600;
        color: #FFF;
        &:nth-child(2){
          &.active{
            background: url("@/assets/images/header-bg1.png");
            width: 100px;
          }
        }
        &.active{
          background: url("@/assets/images/header-bg2.png");
          width: 88px;
          color: #FFF!important;
        }
        a {
          color: #FFF;
          font-weight: 600;        
          &.active, &:hover {
            color: #B52628;
          }
        }
      }
    }
  }
}
.dropdown-container{
  position: fixed;
  top: 100px;
  left: 0;
  width: 100%;
  z-index: 99;
  box-shadow: #cccccc 0px 0px 10px;
}
.dropdown{
    padding: 35px 130px;
    background: #F5F5F5;
    
    display: flex;
    &.dropdown2{
      background-color: #fff;
    }
    .dropdown-title{
      font-weight: 500;
      font-size: 22px;
      color: #111111;
      margin: 14px 0;
      width: 180px;
    }
    .dropdown-ul{
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      margin-left:130px ;
      .dropdown-li{
        display: flex;
        align-items: center;
        width: 120px;
        margin: 14px 20px;
        cursor: pointer;
        a{
          font-weight: 500;
          font-size: 16px;
        }
        &.active{
          color: #B52628;
          .arrow{
            background-image: url("@/assets/images/arrow2.png");
          }
        }
        &:hover{ 
          color: #B52628;
          .arrow{
            background-image: url("@/assets/images/arrow2.png");
          }
        }
        .arrow{
          display: inline-block;
          margin-left: 12px;
          width: 14px;
          height: 14px;
          background-image: url("@/assets/images/arrow1.png");
        }
      }
    }
  }

.swiper-container {
  height: 600px;
  position: relative;  // 确保 .swiper-pagination 的绝对定位有效
  .swiper-wrapper {
    width: 100%;
    :deep(.swiper-slide)  { 
      display: flex;
      justify-content: center;
    }
  }
  .swiper-pagination {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    z-index: 10;
    /* 修改 pagination 的圆点颜色 */
    :deep(.swiper-pagination-bullet) {
      width: 12px;  // 圆点的宽度
      height: 12px; // 圆点的高度
      display: inline-block;
      border-radius: 50%; // 圆形
      background: #fff;   // 默认颜色
      opacity: 0.8;       // 默认透明度
      margin: 0 5px;      // 圆点之间的间距
      border: 1px solid #dc3545;

      &.swiper-pagination-bullet-active {
        background: #dc3545; // 活跃状态的颜色
        border: 1px solid #fff;
        opacity: 1;          // 活跃状态的透明度
      }
    }
  }
}
</style>